<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import Son1 from './son1.vue'
import Son2 from './son2.vue'
import Son3 from './son3.vue'
import son4 from './son4.vue'
import { requireImg } from '@/utils/common'
import deviceAttributes from './device-attributes.vue'
import hxqxEchart from './hxqx-echart.vue'
import { addQxdev, clearQx } from '../js/qx'
import { usePopStore } from '@/stores'
const popStore = usePopStore()
const LegendList = ref([
  {
    name: '3D激光测风雷达设备',
    img: requireImg('infrastructure/device-icon-1.png')
  },
  {
    name: '垂直激光测风雷达',
    img: requireImg('infrastructure/device-icon-2.png')
  },
  {
    name: '小型气象站',
    img: requireImg('infrastructure/device-icon-3.png')
  },
  {
    name: '低空综合气象观测仪',
    img: requireImg('infrastructure/device-icon-4.png')
  },
  {
    name: '大气电场仪',
    img: requireImg('infrastructure/device-icon-5.png')
  },
  {
    name: '能见度仪',
    img: requireImg('infrastructure/device-icon-6.png')
  },
  {
    name: '微雨雷达',
    img: requireImg('infrastructure/device-icon-7.png')
  },
  {
    name: '全天空城像仪',
    img: requireImg('infrastructure/device-icon-8.png')
  }
])

onMounted(() => {
  addQxdev()
})

onUnmounted(() => {
  clearQx()
  popStore.Hangxian.showPop = false
})
</script>
<template>
  <RightBox>
    <Son1></Son1>
    <Son2></Son2>
    <Son3></Son3>
    <son4></son4>
  </RightBox>
  <Legend :list="LegendList" />
  <deviceAttributes />
  <hxqxEchart />
</template>
<style scoped lang="scss"></style>
